<template>
    <div>
        <el-form :inline="true" :model="queryParams" label-width="68px" ref="queryForm"
                 style="text-align: left" v-show="showSearch">
            <el-form-item label="手机号码" prop="userPhone">
                <el-input
                        @keyup.enter.native="handleQuery"
                        clearable
                        placeholder="请输入手机号查询"
                        style="width: 240px"
                        v-model="queryParams.userPhone"
                />
            </el-form-item>
            <el-form-item label="身份证号" prop="userPhone">
                <el-input
                        @keyup.enter.native="handleQuery"
                        clearable
                        placeholder="请输入身份证号查询"
                        style="width: 240px"
                        v-model="queryParams.idCard"
                />
            </el-form-item>
            <el-form-item label="分组" prop="userPhone">
                <el-select v-model="queryParams.groupId" class="m-2" placeholder="请选择">
                    <el-option
                            v-for="item in groupList"
                            :key="item.id"
                            :label="item.groupName"
                            :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button @click="handleQuery" icon="Search" size="mini" type="warning">搜索</el-button>
                <el-button @click="resetQuery" icon="Refresh" size="mini">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" style="margin: 10px 0px">
            <el-col :span="1.5">
                <el-button
                        type="info"
                        plain
                        @click="handleExport"
                ><el-icon><Pointer /></el-icon>导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        @click="addButton()"
                ><el-icon><EditPen /></el-icon>体检信息录入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        @click="addGrouping()"
                        plain
                        type="warning"
                ><el-icon><Setting /></el-icon>分组管理
                </el-button>
            </el-col>
        </el-row>

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>档案管理中心</span>
                    <el-button class="button" text>Physical Examination Appointment Records</el-button>
                </div>
            </template>
            <el-table :data="list" row-key="id"  @selection-change="handleSelectionChange" v-loading="loading">
                <el-table-column :reserve-selection="true" align="center" type="selection" width="50"/>
                <el-table-column align="center" label="档案编号" prop="archiveNumber"/>
                <el-table-column align="center" label="姓名" prop="userName"/>
                <el-table-column align="center" label="联系电话" prop="userPhone"/>
                <el-table-column align="center" label="证件号" prop="idCard"/>
                <el-table-column align="center" label="性别" prop="gender">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.gender==='M'">男</el-tag>
                        <el-tag type="warning" v-if="scope.row.gender==='F'">女</el-tag>
                        <el-tag type="warning" v-if="scope.row.gender==='O'">其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="档案录入时间" prop="createTime">
                    <template #default="scope">
                        <span>{{ $filters.formatDate(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        class-name="small-padding fixed-width"
                        label="操作"
                >
                    <template #default="scope">

                        <el-button
                                @click="keep(scope.row)"
                                icon="Pointer"
                                size="mini"
                                style="color: #3cb71c"
                                type="text"
                        >查看档案
                        </el-button>
                        <el-button
                                @click="handleUpdate(scope.row)"
                                icon="Edit"
                                size="mini"
                                type="text"
                        >更新档案
                        </el-button>
                        <el-button
                                @click="handleDelete(scope.row)"
                                icon="Delete"
                                size="mini"
                                style="color: #FFB101"
                                type="text"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template v-if="list.length!=0">
                <el-pagination
                        :page-sizes="[5, 10, 15, 20]"
                        :total="total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        layout="total, sizes, prev, pager, next, jumper"
                        v-model:current-page="queryParams.pageNum"
                        v-model:page-size="queryParams.pageSize"
                />
            </template>
        </el-card>

        <el-drawer
                ref="drawerRef"
                v-model="dialog"
                :title="title"
                direction="rtl"
                class="demo-drawer"
                size="40%"
        >
            <div style="padding: 10px 20px">
                <el-card class="box-card" style="text-align: left;line-height: 35px;margin: 20px 0px">
                    <h3><el-icon style="padding-right: 10px"><Location /></el-icon>哪家医院体检中心</h3>
                    <p style="color: #b9170b"><el-icon><WarningFilled /></el-icon>严禁泄露，泄露后果自负！</p>
                </el-card>

                <el-card class="box-card" style="text-align: left;line-height: 35px">
                    <el-form :model="form" ref="ruleFormRef" :rules="rules">
                        <el-divider border-style="dotted" />
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="档案编号">
                                    <el-input v-model="form.archiveNumber" autocomplete="off" placeholder="由系统自动生成" :disabled="true"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话">
                                    <el-input v-model="userInfo.userPhone" autocomplete="off" placeholder="请填写联系电话" @blur="getUser()"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="姓名">
                                    <el-input v-model="userInfo.userName" autocomplete="off" placeholder="填写手机号后自动填入" :disabled="true"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="身份证号" prop="idCard">
                                    <el-input v-model="form.idCard" autocomplete="off" placeholder="请填写身份证号"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="分组">
                                    <el-select v-model="form.groupId" class="m-2" placeholder="请选择">
                                        <el-option
                                                v-for="item in groupList"
                                                :key="item.id"
                                                :label="item.groupName"
                                                :value="item.id"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
<!--                        <el-divider border-style="dotted" />-->
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="年龄">
                                    <el-input-number
                                            v-model="form.age"
                                            :min="1"
                                            :max="150"
                                            controls-position="right"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-radio-group v-model="form.gender">
                                        <el-radio label="M">男</el-radio>
                                        <el-radio label="F">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="身高">
                                    <el-input-number
                                            v-model="form.height"
                                            :min="1"
                                            :max="150"
                                            controls-position="right"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="体重">
                                    <el-input-number
                                            v-model="form.weight"
                                            :min="1"
                                            :max="150"
                                            controls-position="right"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="血压" prop="bloodPressure">
                                    <el-input v-model="form.bloodPressure">
                                        <template #append>mmHg</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="血糖" prop="bloodSugar">
                                    <el-input v-model="form.bloodSugar">
                                        <template #append>mmol/L</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="心率" prop="heartRate">
                                    <el-input v-model="form.heartRate">
                                        <template #append>次/分钟</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="血型">
                                    <el-select v-model="form.bloodType" placeholder="请选择血型">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.label"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="肝（是否正常）">
                                    <el-radio-group v-model="form.liver">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="肾（是否正常）">
                                    <el-radio-group v-model="form.kidney">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="胆（是否正常）">
                                    <el-radio-group v-model="form.gallbladder">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="脾（是否正常）">
                                    <el-radio-group v-model="form.spleen">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="胃（是否正常）">
                                    <el-radio-group v-model="form.stomach">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="嗅觉（是否正常）">
                                    <el-radio-group v-model="form.smell">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="味觉（是否正常）">
                                    <el-radio-group v-model="form.gustatorysensation">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="听觉（是否正常）">
                                    <el-radio-group v-model="form.hearing">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="触觉（是否正常）">
                                    <el-radio-group v-model="form.tactilesensation">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="视觉（是否正常）">
                                    <el-radio-group v-model="form.vision">
                                        <el-radio :label="'0'">是</el-radio>
                                        <el-radio :label="'1'">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="过敏情况">
                                    <el-input
                                            v-model="form.allergies"
                                            :rows="2"
                                            type="textarea"
                                            placeholder="无，可不填"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="过往病史">
                                    <el-input
                                            v-model="form.medicalHistory"
                                            :rows="3"
                                            type="textarea"
                                            placeholder="无，可不填"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="在服药物">
                                    <el-input
                                            v-model="form.medication"
                                            :rows="2"
                                            type="textarea"
                                            placeholder="无，可不填"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-divider border-style="dotted" />
                    </el-form>
                    <div style="position: relative;float: right;padding: 0px 20px 20px">
                        <el-button type="success" @click="submitForm">确定</el-button>
                    </div>
                </el-card>
            </div>
        </el-drawer>

        <el-drawer
                ref="drawerRef"
                v-model="dialog2"
                title="体检预约报告"
                direction="rtl"
                class="demo-drawer"
        >
            <div style="padding: 10px 20px">
                <el-card class="box-card" style="text-align: left;line-height: 35px;margin: 20px 0px">
                    <h3>体检档案详情</h3>
                    <p><el-icon><Location /></el-icon>哪家医院档案管理中心</p>
                    <p style="color: #b9170b"><el-icon><WarningFilled /></el-icon>严禁泄露，泄露后果自负！</p>
                </el-card>

                <el-card class="box-card" style="text-align: left;line-height: 35px">
                    <el-descriptions title="档案管理" column="2">
                        <el-descriptions-item label="档案编号"><h2>{{detail.archiveNumber}}</h2></el-descriptions-item>
                        <el-descriptions-item label="姓名">{{detail.userName}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{detail.userPhone}}</el-descriptions-item>
                        <el-descriptions-item label="证件号">{{detail.idCard}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{detail.gender}}</el-descriptions-item>
                        <el-descriptions-item label="身高">{{detail.height}}</el-descriptions-item>
                        <el-descriptions-item label="血型">{{detail.bloodType}}</el-descriptions-item>
                        <el-descriptions-item label="血糖">{{detail.bloodSugar}} mmol/L</el-descriptions-item>
                        <el-descriptions-item label="血压">{{detail.bloodPressure}} mmHg</el-descriptions-item>
                        <el-descriptions-item label="心率">{{detail.heartRate}} 次/分钟</el-descriptions-item>
                        <el-descriptions-item label="肝（是否正常）">{{detail.liver==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="肾（是否正常）">{{detail.kidney==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="胆（是否正常）">{{detail.gallbladder==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="脾（是否正常）">{{detail.spleen==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="胃（是否正常）">{{detail.stomach==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="嗅觉（是否正常）">{{detail.smell==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="味觉（是否正常）">{{detail.gustatorysensation==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="听觉（是否正常）">{{detail.hearing==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="触觉（是否正常）">{{detail.tactilesensation==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="视觉（是否正常）">{{detail.vision==='0'?'是':'否'}}</el-descriptions-item>
                        <el-descriptions-item label="过敏情况">{{detail.allergies}}</el-descriptions-item>
                        <el-descriptions-item label="过往病史">{{detail.medicalHistory}}</el-descriptions-item>
                        <el-descriptions-item label="在服药物">{{detail.medication}}</el-descriptions-item>
                        <el-descriptions-item label="档案录入时间">
                            {{ $filters.formatDate(detail.createTime) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="档案更新时间">
                            {{ $filters.formatDate(detail.updateTime) }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <div style="padding: 0px 30px;position: relative;float: right;padding: 10px 20px">
                        <el-button type="success" @click="cancelArchives">关闭</el-button>
                    </div>
                </el-card>
            </div>
        </el-drawer>

        <el-drawer
                ref="drawerRef"
                v-model="dialog3"
                title="分组管理"
                direction="ltr"
                class="demo-drawer"
                size="70%"
        >
            <div style="padding: 10px 20px">
                <el-form :inline="true" :model="groupQueryParams" label-width="68px" ref="queryForm"
                         style="text-align: left">
                    <el-form-item label="组名" prop="userPhone">
                        <el-input
                                @keyup.enter.native="getGroups"
                                clearable
                                placeholder="请输入分组名称"
                                style="width: 240px"
                                v-model="groupQueryParams.groupName"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getGroups" icon="Search" size="mini" type="warning">搜索</el-button>
<!--                        <el-button @click="resetQuery" icon="Refresh" size="mini">重置</el-button>-->
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8" style="margin: 10px 0px">
                    <el-col :span="1.5">
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="addGroup()"
                        ><el-icon><EditPen /></el-icon>新增分组</el-button>
                    </el-col>
                </el-row>

                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>分组管理中心</span>
                            <el-button class="button" text>Management Center</el-button>
                        </div>
                    </template>
                    <el-table :data="groupList" row-key="userId" v-loading="loading">
                        <el-table-column align="center" type="index" width="50"/>
                        <el-table-column align="center" label="组名" prop="groupName"/>
                        <el-table-column align="center" label="组名标识" prop="groupKey"/>
                        <el-table-column align="center" label="创建时间" prop="createTime">
                            <template #default="scope">
                                <span>{{ $filters.formatDate(scope.row.createTime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                class-name="small-padding fixed-width"
                                label="操作"
                                width="160"
                        >
                            <template #default="scope">
                                <el-button
                                        @click="editGroup(scope.row)"
                                        icon="CircleCheck"
                                        size="mini"
                                        type="text"
                                >更新
                                </el-button>
                                <el-button
                                        @click="delGroup(scope.row)"
                                        icon="CircleClose"
                                        size="mini"
                                        style="color: #FFB101"
                                        type="text"
                                >删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </el-drawer>

        <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="groupTitle" v-model="open" width="500px" append-to-body destroy-on-close>
            <el-form ref="form" :model="groupForm" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="分组名称" prop="groupName">
                            <el-input v-model="groupForm.groupName" placeholder="请输入分组名称" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分组标识" prop="groupKey">
                            <el-input v-model="groupForm.groupKey" placeholder="请输入分组名称" maxlength="30" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="groupSubmitForm">确 定</el-button>
                <el-button @click="cancelGroup">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "User",
        data() {
            return {
                // 选中数组
                ids: [],
                groupList:[],
                groupQueryParams:{
                  groupName:'',
                },
                open:false,
                groupForm:{},
                groupTitle:'',
                dialog3:false,
                userInfo:{

                },
                idCard:'',//身份证号
                detail:{},
                dialog2:false,
                dialog:false,
                dialogFormVisible:false,
                // 遮罩层
                loading: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 用户表格数据
                list: [],
                // 弹出层标题
                title: "",
                // 表单参数
                form: {},
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userPhone: '',
                    idCard:'',
                    groupId:'',
                },
                options:[
                    {
                        label:"A血型",
                        value:"1",
                    },
                    {
                        label:"B血型",
                        value:"2",
                    },
                    {
                        label:"AB血型",
                        value:"3",
                    },
                    {
                        label:"O血型",
                        value:"4",
                    },
                    {
                        label:"其他血型",
                        value:"5",
                    },
                ],
                // 表单校验
                rules: {
                    time: [
                        {required: true, message: "请选择体检时间", trigger: "blur"},
                    ],
                    userName: [
                        {required: true, message: "用户名称不能为空", trigger: "blur"},
                        {min: 2, max: 12, message: '用户名称长度必须介于 2 和 12 之间', trigger: 'blur'}
                    ],
                    userPhone: [
                        {required: true, message: "请填写联系电话", trigger: "blur"},
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ],
                    idCard: [
                        // {required: true, message: "请填写身份证号", trigger: "blur"},
                        {message: "请填写身份证号", trigger: "blur"},
                        {
                            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
                            message: "请输入正确的身份证号",
                            trigger: "blur"
                        }
                    ],
                }
            };
        },
        created() {
            this.getUserList();
            this.getGroups();
        },
        methods: {
            /** 导出按钮操作 */
            handleExport() {
                this.$confirm(`确定要导出吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 用户点击"确定"按钮，执行删除操作
                    this.$http.post('archives/exportUser', this.ids, {
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        responseType: 'blob' // 指定响应类型为二进制流
                    }).then(res => {
                        // 获取响应数据并进行处理
                        const url = window.URL.createObjectURL(new Blob([res.data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', '用户列表.xlsx'); // 设置下载文件名
                        document.body.appendChild(link);
                        link.click();
                    });
                }).catch(() => {
                    // 用户点击"取消"按钮，什么也不做
                })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                // this.single = selection.length != 1;
            },
            cancelGroup(){
              this.resetGroup();
              this.open=false;
            },
            delGroup(row){
                this.$confirm('是否确定删除分组?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data: res} = await this.$http.get('group/delHealthGroup', {params:{
                            id:row.id
                        }});
                    console.log(res)
                    if (res.code == 200) {
                        this.getGroups();
                        this.$message.success('档案删除成功！')
                    } else {
                        this.$message.error('该分组下还存在档案，不允许删除！')
                    }
                }).catch(() => {
                    this.$message.info('已取消删除！')
                })
            },
            async getGroups() {
                this.loading = true;
                const {data: res} = await this.$http.get('group/getHealthGroups', {params: this.groupQueryParams})
                console.log(res)
                this.groupList = res.data;
                this.loading = false
            },
            addGroup(){
                this.resetGroup();
                this.groupTitle="新增分组";
                this.open=true;
            },
            editGroup(row){
                this.groupForm=row;
                this.groupTitle="更新分组";
                this.open=true;
            },
            /** 提交按钮 */
            async groupSubmitForm() {
                if (this.groupForm.id != 0) {
                    const {data: res} = await this.$http.post('group/updateHealthGroup',JSON.parse(JSON.stringify(this.groupForm)));
                    if (res.code==200){
                        this.$message.success('修改成功')
                        this.getGroups();
                    }else {
                        this.$message.error('服务器异常')
                    }
                } else {
                    const {data: res} = await this.$http.post('group/insertHealthGroup',JSON.parse(JSON.stringify(this.groupForm)));
                    if (res.code==200){
                        this.$message.success('修改成功')
                        this.getGroups();
                    }else {
                        this.$message.error('服务器异常')
                    }
                }
                this.open = false
            },
            resetGroup(){
              this.groupForm={
                  id:0,
                  groupName:'',
                  groupKey:'',
              }
            },
            //分组管理
            addGrouping(){
                this.getGroups();
                this.dialog3=true;
            },
            cancelArchives(){
                this.dialog2=false;
            },
            //获取用户信息
            getUser(){
                console.log(this.userInfo.userPhone)
                if(this.userInfo.userPhone==undefined){
                    return;
                }
                this.$http.get("user/getUserByUserPhone",{params:{
                    userPhone:this.userInfo.userPhone,
                    }}).then((res)=>{
                    console.log(res)
                    this.userInfo=res.data.data;
                    this.form.userId=res.data.data.id;
                })
            },

            keep(row){
                console.log(row)
                this.detail=row;
                this.dialog2=true;
            },

            addButton(){
                this.reset();
                this.title="档案信息录入";
                this.dialog=true;
            },

            async getUserList() {
                this.loading = true;
                const {data: res} = await this.$http.get('archives/getArchives', {params:this.queryParams})
                console.log(res)
                this.list = res.data.children
                this.total = res.data.total
                this.loading = false
            },
            // 取消按钮
            cancel() {
                this.dialogFormVisible = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: 0,
                    userId: 0,
                    age: 0,
                    gender: '',
                    height: "",
                    weight: "",
                    bloodType:"",
                    allergies:"",
                    medicalHistory:"",
                    medication:"",
                    archiveNumber:"",
                    idCard:'',
                    groupId:'',
                    bloodPressure:'',
                    bloodSugar:'',
                    heartRate:'',
                    liver:'',
                    kidney:'',
                    gallbladder:'',
                    spleen:'',
                    stomach:'',
                    smell:'',
                    gustatorysensation:'',
                    hearing:'',
                    tactilesensation:'',
                    vision:''
                };
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getUserList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                // 查询参数
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    userPhone: '',
                    idCard:'',
                },
                    this.getUserList();
            },
            /** 修改按钮操作 */
            async handleUpdate(row) {
                console.log(row)
                this.form = JSON.parse(JSON.stringify(row));
                this.title = "更新用户档案";
                this.dialog = true;
            },
            /** 提交按钮 */
            async submitForm() {
                // console.log(this.form)
                await this.$refs["ruleFormRef"].validate(valid => {
                    if (valid) {
                        if (this.form.id != 0) {
                            this.modifyFrom();
                        } else {
                            this.addFromFun();
                        }
                    }
                });
                this.dialog = false;
            },
            /**修改用户*/
            async modifyFrom() {
                const {data: res} = await this.$http.post('archives/updateArchives', JSON.parse(JSON.stringify(this.form)));
                console.log(res)
                if (res.code == 200) {
                    this.getUserList();
                    this.$message.success('档案更新成功!')
                } else {
                    this.$message.error('服务器异常')
                }
            },
            /**
             * 添加用户
             * */
            async addFromFun() {
                const {data: res} = await this.$http.post('archives/insertArchives', this.form);
                console.log(res)
                if (res.code === 200) {
                    this.$message.success('档案录入成功！')
                    this.getUserList();
                } else if (res.code === 50003) {
                    this.$message.error('此用户档案已录入，请再次录入！')
                } else {
                    this.$message.error('服务器异常')
                }
            },
            /** 删除按钮操作 */
            async handleDelete(row) {
                this.$confirm('是否确定删除档案?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data: res} = await this.$http.get('archives/delArchives', {params:{
                            id:row.id
                        }});
                    console.log(res)
                    if (res.code == 200) {
                        this.getUserList();
                        this.$message.success('档案删除成功！')
                    } else {
                        this.$message.error('服务器异常！')
                    }
                }).catch(() => {
                    this.$message.info('已取消删除！')
                })
            },
            handleSizeChange(newSize) {
                this.queryParams.pageSize = newSize;
                this.getUserList();
            }
            ,
            handleCurrentChange(current) {
                this.queryParams.pageNum = current;
                this.getUserList();
            },
        }
    };
</script>


